<template>
<div>
  <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
    <el-menu-item><router-link to="/">首页</router-link></el-menu-item>
    <el-menu-item><router-link to="/publish">发布</router-link></el-menu-item>
    <el-menu-item><router-link to="/mine">我的</router-link></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
    <el-menu-item disabled></el-menu-item>
  </el-menu>

  <el-row :gutter="20">
    <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="9.5">
      <div class="grid-content bg-purple">
        <div class="card-div">
            <el-card class="box-card" shadow="hover">
              <p>{{ this.article_content }}</p>
              <el-input v-model="comment_input"></el-input>
              <el-button class="comment-button" @click="handleComment">评论</el-button>
              <div v-for="comment in this.comment_list" :key="comment[1]">
                <div class="panel panel-info">
                  <div class="panel-heading">
                    <p>userid:{{ comment[0] }}</p>
                  </div>
                  <div class="panel-body">
                    <p>{{ comment[1] }}</p>
                  </div>
                </div>
              </div>
            </el-card>
        </div>
      </div>
    </el-col>
    <el-col :span="7"><div class="grid-content bg-purple"></div></el-col>
  </el-row>

</div>
</template>

<script>
export default {
  name: "Article",
  data() {
    return {
      user_id: '',
      article_id: '',
      article_content: '',
      comment_input: '',
      comment_list: {}
    }
  },
  methods: {
    // 处理发表评论
    handleComment: function (){
      this.$http.post('/comment_post', [this.user_id, this.article_id, this.comment_input]).then(res=>{
        console.log(res);
        if(res.status===200){
          this.$message('评论成功')
          this.comment = ''
          // 更新评论
          this.$http.post('/get_comments' ,[this.article_id]).then(res => {
            this.comment_list = res.data
            console.log(res)
          }).catch(err => {
            console.log(err)
          })
        }
      }).catch(err => {
        console.log(err);
      })

    }
  },
  created() {
    this.user_id = window.sessionStorage.getItem('user_id');
    this.article_id = this.$route.params.id
    let id = this.article_id
    //let tt = this.article_id
    this.$http.post('/article_detail', [id]).then(res => {
      console.log(res);
      this.article_content = res.data
    }).catch(err => {
      console.log(err);
    })

    // 获得评论
    this.$http.post('/get_comments' ,[this.article_id]).then(res => {
      this.comment_list = res.data
      console.log(res)
    }).catch(err => {
      console.log(err)
    })
  },
  mounted() {

  },
}

</script>

<style scoped>

.box-card {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 600px;
  text-align: left;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-purple {
  background: white;
}

.comment-button{
  margin-top: 20px;
  margin-bottom: 20px;
}

</style>